<!doctype html>
<html lang="en-us">
  <head>
    <title>
      Basic context-fill/context-stroke/-moz-context-properties test
    </title>
    <style>
      img {
        width: 100px;
        height: 100px;
        -moz-context-properties: fill, stroke;
      }

      .img1 {
        fill: lime;
        stroke: purple;
      }

      .img2 {
        fill: blue;
        stroke: orange;
      }

      .img3 {
        fill: yellow;
        stroke: red;
      }
    </style>
  </head>
  <body>
    <img
      class="img1"
      src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
                           <rect width='100%' height='100%' stroke-width='30px'
                           fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>" />
    <img
      class="img2"
      src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
                           <rect width='100%' height='100%' stroke-width='30px'
                           fill='context-fill yellow' stroke='context-stroke'/></svg>" />
    <img
      class="img3"
      src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>
                          <rect width='100%' height='100%' stroke-width='30px'
                          fill='context-stroke' stroke='context-fill red'/></svg>" />
  </body>
</html>
